<template>
    <!-- 主要内容第一部分 -->
    <div id="app-one">
        <img src="/imgs/home/title01.png" class="title01">
        <div class="one-part">
            <div
                v-for="(img,i) in imgs"
                :key="i"
                :style="{'background-image':'url('+img.path+')'}"
                class="one-part-imgs"
            >
                <div class="bgColor">
                    <p class="bgColor-p">{{img.name}}</p>
                    <div v-for="(con,item) in img.content" :key="item" class="bgColor-intro">{{item+1}}.{{con}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name:'',
    props:[''],
    data () {
      return {
            imgs:[
                {
                    path:'/imgs/home/tu01.png',
                    name:'电商运营',
                    content:[
                        '产品定位、店铺定位，店铺权重因素（动销率、店铺层次、DSR动态评分、上新率、访问深度、旺旺在线时间、响应速度、退款纠纷）、品牌权重、生意参谋数据统计；',
                        '淘宝自然搜索权重；',
                        '标题多种找词法、标题优化组合、常用工具购买；',
                        '淘金币、淘宝客、直通车优化；',
                        '爆款营销、钻展营销、活动营销；',
                        '站外营销、引流技巧，整合营销，销量转化率提升；',
                    ],
                },
                {
                    path:'/imgs/home/tu02.png',
                    name:'视觉设计',
                },
                {
                    path:'/imgs/home/tu03.png',
                    name:'网站建设',
                },
                {
                    path:'/imgs/home/tu04.png',
                    name:'跨境电商',  
                },
            ],
            course:[
                {
                    name:'电商运营',
                    content:[
                        '产品定位、店铺定位，店铺权重因素（动销率、店铺层次、DSR动态评分、上新率、访问深度、旺旺在线时间、响应速度、退款纠纷）、品牌权重、生意参谋数据统计；',
                        '淘宝自然搜索权重；',
                        '标题多种找词法、标题优化组合、常用工具购买；',
                        '淘金币、淘宝客、直通车优化；',
                        '爆款营销、钻展营销、活动营销；',
                        '站外营销、引流技巧，整合营销，销量转化率提升；',
                    ],
                },
                {
                    name:'视觉设计',
                },
                {
                    name:'网站建设',
                },
                {
                    name:'跨境电商',  
                }
            ],
      };
    },
  }

</script>
<style scoped>
/* 主要内容第一部分 */
#app-one{
	height: 1015px;
}
.title01{
	display: block;
	margin: 95px auto;
}
.one-part{
	width: 1200px;
	height: 774px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.one-part-imgs{
	width: 586px;
	height: 326px;
	flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.bgColor{
    width: 586px;
	height: 326px;
    background:rgba(4,31,70,0.5);
    color: #ffffff;
    padding: 23px;
    position: absolute;
    left: 0;
    top: 251px;
    transition: all 0.5s;
}
.one-part-imgs:hover .bgColor{ 
    position: absolute;
    left: 0;
    top: 0;
}
.bgColor-p{
    width: 102px;
    margin: 0 auto;
    margin-bottom: 23px;
    font-size: 23px;
}
.bgColor-intro{
    font-size: 17px;
    margin: 5px 0;
}
</style>